<template>
  <div>
    <a-modal
      v-model:open="visible"
      :mask-closable="false"
      width="40%"
      title="变更积分"
      :style="{ top: '40px' }"
      :footer="null"
    >
      <div
        v-if="visible"
        v-permission="['base-data:member-account-score:change']"
        v-loading="loading"
      >
        <a-form ref="form" layout="vertical" :model="formData" :rules="rules">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-form-item label="会员信息">
                <a-statistic
                  v-if="!loading"
                  :value="`${memberAccount.member?.name}(${memberAccount.member?.code})`"
                  :value-style="{ color: '#1677ff', fontSize: '14px' }"
                  style="margin-right: 50px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="有效积分">
                <a-statistic
                  v-if="!loading"
                  :value="memberAccount.effectiveScore"
                  prefix="🎖️"
                  :value-style="{ color: '#3f8600', fontSize: '16px' }"
                  style="margin-right: 50px"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item label="冻结积分">
                <a-statistic
                  v-if="!loading"
                  :value="memberAccount.freezeScore"
                  prefix="🎖️"
                  :value-style="{ color: '#cf1322', fontSize: '16px' }"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="12">
              <a-form-item label="变更类型" name="changeType">
                <a-select v-model:value="formData.changeType">
                  <a-select-option
                    v-for="item in _This().$enums.MEMBER_ACCOUNT_CHANGE_TYPE.values()"
                    :key="item.code"
                    :value="item.code"
                    >{{ item.desc }}</a-select-option
                  >
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item label="变更积分" name="changeType">
                <a-input-number v-model:value="formData.changeScore" style="width: 100%" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="16">
            <a-col :span="24">
              <a-form-item label="原因" name="changeReason">
                <a-textarea
                  v-model:value="formData.changeReason"
                  :autosize="{ minRows: 4, maxRows: 10 }"
                />
              </a-form-item>
            </a-col>
          </a-row>
          <div class="form-modal-footer">
            <a-space>
              <a-button type="primary" :loading="loading" html-type="submit" @click="submitForm"
                >确认</a-button
              >
              <a-button :loading="loading" @click="closeDialog">取消</a-button>
            </a-space>
          </div>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { getCurrentInstance, ref } from 'vue';
  import * as memberAccountApi from '@/api/base-data/member-account';
  import { ChangeMemberAccountBo } from '@/api/base-data/member-account/model/changeMemberAccountBo';
  import { QueryMemberAccountBo } from '@/api/base-data/member-account/model/queryMemberAccountBo';

  const emits = defineEmits(['close']);

  const props = defineProps({
    /**
     * 会员id
     */
    memberId: {
      type: String,
      required: true,
    },
  });

  // this对象
  const instance: any = getCurrentInstance();

  // form
  const form = ref();
  // 是否可见
  const visible = ref(false);
  // 数据加载状态
  const loading = ref(false);
  // 会员积分账户
  const memberAccount = ref<QueryMemberAccountBo>({
    id: '',
    memberId: '',
    member: null,
    effectiveScore: 0,
    freezeScore: 0,
    createTime: '',
    updateTime: '',
  });
  // 表单数据
  const formData = ref<ChangeMemberAccountBo>({
    memberId: props.memberId,
    changeScore: null,
    changeType: 1,
    changeReason: '',
  });

  // 表单校验规则
  const rules = ref({
    changeType: [{ required: true, message: '请选择变更类型' }],
    changeScore: [{ required: true, message: '请输入变更积分' }],
    changeReason: [{ required: true, message: '请输入原因' }],
  });

  // 初始化表单数据
  const initFormData = (changeType: number) => {
    formData.value = {
      memberId: props.memberId,
      changeScore: null,
      changeType: changeType,
      changeReason: '',
    };
  };

  // 初始化会员积分账户
  const initMemberAccount = () => {
    memberAccount.value = {
      id: '',
      memberId: props.memberId,
      member: null,
      effectiveScore: 0,
      freezeScore: 0,
      createTime: '',
      updateTime: '',
    };
  };

  // 加载会员积分账户数据
  const loadMemberAccountData = async () => {
    loading.value = true;
    memberAccountApi
      .getByMemberId(props.memberId)
      .then((data) => {
        memberAccount.value = data;
      })
      .finally(() => {
        loading.value = false;
      });
  };

  // 打开弹窗
  const openDialog = (changeType: number) => {
    visible.value = true;
    initFormData(changeType);
    initMemberAccount();
    loadMemberAccountData();
  };

  // 提交表单
  const submitForm = () => {
    form.value.validate().then((valid: boolean) => {
      if (valid) {
        loading.value = true;
        memberAccountApi
          .changeScore(formData.value)
          .then(() => {
            _This().$msg.createSuccess('提交成功！');
            closeDialog();
          })
          .finally(() => {
            loading.value = false;
          });
      }
    });
  };

  // 关闭对话框
  const closeDialog = () => {
    visible.value = false;
    emits('close');
  };

  //
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
